<template>
	<div>
		<a-button type="primary" @click="handleTimeLineAdd()">
			添加
		</a-button>
		<a-button type="link" @click="handleTimeLinePreview()">
			预览
		</a-button>
		<a-card>
			<a-table :columns="columns" 
				:data-source="page.list" 
				rowKey="id" bordered 
				:pagination="false"
				:loading="loading">
				<template slot="enabled" slot-scope="text,record">
					<a-switch 
						:default-checked="text == 0 ? false : true"
						:disabled="disable"
						@change="enableTL(record.id, text)"/>
				</template>
				<template slot="operation" slot-scope="text,record">
					<a-button type="primary" @click="handleTimeLineEdit(record.id)">
						修改
					</a-button>
					<a-popconfirm title="删除暂时不开放，后台禁用即可" ok-text="Yes" cancel-text="No"
						@confirm="deleteTimeLine(record.id)">
						<a-button type="danger" disabled>
							删除
						</a-button>
					</a-popconfirm>
				</template>
			</a-table>
			<a-pagination 
				v-model="page.currentPage" 
				:page-size-options="['5','10','20','50']" 
				:total="page.totalCount"
				show-size-changer 
				:page-size="page.pageSize" 
				@showSizeChange="onSizeChange" 
				@change="onPageChange">
			</a-pagination>
		</a-card>
	</div>
</template>

<script>
	import {
		timeLineColumns as columns
	} from '@/assets/js/tableList/SystemTable.js'
	import {
		enableTimeLine,
		getTimeLineByPage
	} from '@/api/System.js'
	export default {
		name: 'TimeLineList',
		data() {
			return {
				loading: true,
				disable: false,
				columns: [],
				page: {
					currentPage: 1, // 当前页
					pageSize: 5, // 每页显示条数
					totalPage: 0, // 总页数
					totalCount: 0, // 总条数
					params: {}, // 查询参数对象
					list: [], // 数据
					sortColumn: '', // 排序列
					sortMethod: 'asc' // 排序方式
				}
			}
		},
		mounted() {
			this.initList()
			this.getTimeLineList()
		},
		methods: {
			initList() {
				this.columns = columns
			},
			async getTimeLineList() {
				const {
					data: res
				} = await getTimeLineByPage(this.page)
				// console.log(res)
				if (res.code !== 20005)
					return this.$message.error('列表加载出错')
				this.page = res.data
				this.page.index = undefined
				this.loading = false
				this.$message.success(res.msg)
			},
			onPageChange(newPage) {
				this.page.currentPage = newPage
				this.getTimeLineList()
			},
			// 页面变化
			onSizeChange(current, newSize) {
				this.page.pageSize = newSize;
				this.getTimeLineList()
			},
			async enableTL (id, status) {
				let state = status == 1 ? 0 : 1
				this.disable = true
				const {data:res} = await enableTimeLine(id, state)
				// console.log(res)
				setTimeout(()=>{
					this.disable = false
				},800)
				if (res.code === 20008) {
					this.$message.success(res.msg)
				}
				if (res.code === 30003) {
					this.$message.error(res.msg)
					this.getAboutList()
				}
			},
			handleTimeLineAdd () {
				this.$router.push('/system/timeline/edit')
			},
			handleTimeLineEdit (id) {
				this.$router.push(`/system/timeline/edit?id=${id}`)
			},
			// 预览
			handleTimeLinePreview () {
				this.$router.push('/system/timeline/preview')
			}
		}
	}
</script>

<style>
</style>
